I meant to update this post earlier but forgot. The same can be accomplished using the built-in valid: option with CSS classes.
I’m relatively new to jQuery. But I needed a client-side validation framework. Enter jQuery.validate. Great little framework and easy to implement. But I needed one more thing. When a field WAS valid, I wanted it to display a success message. Below is the (ugly, hardcoded) additions I made. It gives me a nice little green checkmark when the field’s all nice and valid.
successes: function() {
return $(this.settings.errorElement + "." + this.settings.successClass, this.errorContext);
},
successesFor: function(element) {
return this.successes().filter("[for='" + this.idOrName(element) + "']");
},
showSuccess: function(me) {
for (var i = 0; this.successList[i]; i++) {
var success = this.successList[i];
if (success) {
var message = "<img src=\"../../Content/Images/greencheckmark.png\" class=\"checkmark\" />"
if (this.settings.successClass) { } else { this.settings.successClass = "field-validation-success"; }
var label = this.successesFor(success);
if (label.length) {
// refresh error/success class
label.removeClass().addClass(this.settings.successClass);
// check if we have a generated label, replace the message then
label.attr("generated") && label.html(message);
} else {
// create label
label = $("<" + this.settings.errorElement + "/>")
.attr({ "for": this.idOrName(success), generated: true })
.addClass(this.settings.successClass)
.html(message || "");
if (this.settings.wrapper) {
// make sure the element is visible, even in IE
// actually showing the wrapped element is handled elsewhere
label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
}
if (!this.labelContainer.append(label).length)
this.settings.errorPlacement
? this.settings.errorPlacement(label, $(success))
: label.insertAfter(success);
}
if (this.settings.success) {
label.text("");
typeof this.settings.success == "string"
? label.addClass(this.settings.success)
: this.settings.success(label);
}
}
}
if (this.successList.length) {
this.toShow = this.toShow.add(this.containers);
}
if (this.settings.success) {
for (var i = 0; this.successList[i]; i++) {
this.showLabel(this.successList[i]);
}
}
if (this.settings.unhighlight) {
for (var i = 0, elements = this.invalidElements(); elements[i]; i++) {
var label = this.successesFor(elements[i]);
if (label.length) {
label.attr("generated") && label.html("");
}
}
}
this.toHide = this.toHide.not(this.toShow);
this.hideErrors();
this.addWrapper(this.toShow).show();
},
And modified the following function:
// http://docs.jquery.com/Plugins/Validation/Validator/element
element: function(element) {
element = this.clean(element);
this.lastElement = element;
this.prepareElement(element);
this.currentElements = $(element);
var result = this.check(element);
if (result) {
delete this.invalid[element.name];
} else {
this.invalid[element.name] = true;
}
if (!this.numberOfInvalids()) {
// Hide error containers on last error
this.toHide = this.toHide.add(this.containers);
}
this.showErrors();
this.showSuccess();
return result;
},
